<template>
  <el-main>
    <!-- 查看天气 更多 -->
    <el-row>
      <el-col :span="12">
        <div class="dashboard-card">
          <box-header :withSplit="false" :title="weatherTitle">
            <el-button type="primary" size="medium" @click="weatherDialogVisible=true">查看天气</el-button>
          </box-header>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dashboard-card">
          <box-header title="通知消息">
            <el-button type="primary" size="medium">更多</el-button>
          </box-header>
        </div>
      </el-col>
    </el-row>
    <!-- 数据总览 -->
    <el-row>
      <div class="dashboard-card">
        <box-header title="数据总览">
          <el-button-group>
            <el-button
              @click="setHigHeight=0"
              size="medium"
              :type="setHigHeight===0?'primary':'default'"
            >本月</el-button>
            <el-button
              @click="setHigHeight=1"
              size="medium"
              :type="setHigHeight===1?'primary':'default'"
            >本季</el-button>
            <el-button
              @click="setHigHeight=2"
              size="medium"
              :type="setHigHeight===2?'primary':'default'"
            >本年</el-button>
          </el-button-group>
        </box-header>
        <div class="display-data-wrap">
          <div
            class="display-data"
            v-for="(item,index) in dataOverview"
            :key="'display-data'+index"
          >
            <p>{{item.name}}</p>
            <p>
              <span>{{item.value}}</span>
              <span>{{item.unit}}</span>
            </p>
          </div>
        </div>
      </div>
    </el-row>
    <!-- 地块采集 日期 搜索 饼状图 -->
    <el-row>
      <el-col :span="12">
        <div class="dashboard-card">
          <box-header title="地块采集统计"></box-header>
          <div class="recovery" ref="recovery"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dashboard-card">
          <box-header title="支出类型统计">
            <el-date-picker
              v-model="payStatistics"
              size="mini"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-button type="primary">搜索</el-button>
          </box-header>
          <div class="pieChart" ref="pieChart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="weatherDialogVisible" width="80%" center>
      <div>
        <el-tabs v-model="weatherActiveName" @tab-click="handleTabClick">
          <el-tab-pane label="实时" name="first" class="tab-pane-weather">
            <el-table :data="realTimeTableData" style="width: 100%">
              <el-table-column prop="date" align="center" label="空气温度" width="180"></el-table-column>
              <el-table-column prop="name" align="center" label="空气湿度" width="180"></el-table-column>
              <el-table-column prop="address" align="center" label="风向"></el-table-column>
              <el-table-column prop="address" align="center" label="风速"></el-table-column>
              <el-table-column prop="address" align="center" label="降雨量"></el-table-column>
              <el-table-column prop="address" align="center" label="气压"></el-table-column>
              <el-table-column prop="address" align="center" label="光照强度"></el-table-column>
            </el-table>

            <el-table :data="realTimeTableData2" style="width: 100%">
              <el-table-column prop="date" align="center" label="空气温度" width="180"></el-table-column>
              <el-table-column prop="name" align="center" label="空气湿度" width="180"></el-table-column>
              <el-table-column prop="address" align="center" label="风向"></el-table-column>
              <el-table-column prop="address" align="center" label="风速"></el-table-column>
              <el-table-column prop="address" align="center" label="降雨量"></el-table-column>
              <el-table-column prop="address" align="center" label="气压"></el-table-column>
              <el-table-column prop="address" align="center" label="光照强度"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="时值" name="second" class="tab-pane-weather">2</el-tab-pane>
          <el-tab-pane label="日值" name="third" class="tab-pane-weather">3</el-tab-pane>
          <el-tab-pane label="月值" name="fourth" class="tab-pane-weather">4</el-tab-pane>
        </el-tabs>
      </div>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="weatherDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="weatherDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
import boxHeader from "@/components/boxHeader";
export default {
  data() {
    return {
      weatherTitle: "",
      payStatistics: "",
      dataOverview: [],
      setHigHeight: 0,
      weatherDialogVisible: false,
      weatherActiveName: "first",
      realTimeTableData: [],
      realTimeTableData2: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  components: {
    boxHeader
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab);
    }
  },
  created() {
    
    // 首页天气数据
    this.$http({
      url: "/farmland/mock/weather"
    }).then(res => {
      if(res.code===1){
        this.weatherTitle = res.data.createDate;
        this.realTimeTableData = [res.data];
        return
      }
      this.$message.error(res.msg)
    });

    //数据总览
    this.$http({
      url: "/farmland/mock/dataOverview"
    }).then(res => {
      this.dataOverview = res.month;
    });
  },
  mounted() {
    if(this.$store.state.dashboard.weatherTodayVoList.length>0){
      this.$store.dispatch('dashboard/FETCH_WEATHER')
    }

    this.$store.dispatch('dashboard/FETCH_DATA_OVERVIEW')
    // 地块采集统计
    this.$http({
      url: "/farmland/mock/farmRecoveryStatics"
    }).then(res => {
      let option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: res.data.map(item => item.name),
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: res.data.map(item => item.one),
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.33, color: "#83bff6" },
                { offset: 0.33, color: "skyblue" },
                { offset: 0.66, color: "skyblue" },
                { offset: 0.66, color: "#188df0" },
                { offset: 1, color: "#188df0" }
              ])
            }
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: res.data.map(item => item.two)
          }
        ]
      };
      this.$nextTick(() => {
        let instace = window.echarts.init(this.$refs.recovery);
        instace.setOption(option);
      });
    });

    // 饼图数据
    this.$http({
      url: "/farmland/mock/farmPayStatics"
    }).then(res => {
      // let pciData=[]
      // for(var i=0;i< Object.keys(res.data[0]).length;i++){
      //   return  pciData.push({value:Object.keys(res.data[0]).map,name: Object.values(res.data[0]).map})
      // }
      // console.log('pciData')
      // let arr = []
      // console.log('饼图',{...res.data[0]});
      // for (let i in res.data[0]) {
      //     arr.push({i})
      // }
      // Object.values(res.data[0]).map(item=>{
      //   arr.push({item})
      // })
      // console.log('饼图',arr)
      let option = {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            data:[...res.data]
            //  [
            //   { value: 335, name: "人工" },
            //   { value: 310, name: "其他" },
            //   { value: 234, name: "物料" },
            //   { value: 135, name: "机械" },
            //   { value: 1548, name: "农药" },
            //   { value: 452, name: "肥料" }
            // ]
          }
        ]
      };
      this.$nextTick(() => {
        let instace = window.echarts.init(this.$refs.pieChart);
        instace.setOption(option);
      });
    });

    // 弹窗数据
    this.$http({
      url: "/farmland/mock/weather"
    }).then(res => {
      if (Object.is(res.code, 1)) {
        this.realTimeTableData = [res.data];
        // console.log('弹窗一',this.realTimeTableData)
        return;
      }
      this.$message.error(res.msg);
    });

    // 弹窗数据二
    this.$http({
      url: "/farmland/mock/timeWeather"
    }).then(res => {
      if (Object.is(res.code, 1)) {
        this.realTimeTableData2 = [res.data.weather.weatherForecastVoList];
        // console.log('弹窗二',this.realTimeTableData2)
        return;
      }
      this.$message.error(res.msg);
    });
  }
};
</script>

<style scoped>
.dashboard-card {
  background: rgb(25, 46, 62);
  padding: 10px 30px;
  margin: 10px 5px;
}
.recovery {
  height: 400px;
}
.pieChart {
  height: 398px;
  width: 580px;
}
.el-range-editor--mini.el-input__inner {
  width: 270px;
}
.display-data-wrap {
  display: flex;
  color: #fff;
  justify-content: space-around;
  text-align: center;
  margin: 30px 10px 10px;
}
.display-data {
  border-left: 1px solid #ccc;
  flex: 1;
}
.display-data:nth-of-type(1) {
  border-left: none;
}
/deep/ .el-tabs__item {
  color: #dcdfd6;
}
</style>